<template>
  <div class="home-container">
    <div class="course-list">
      <div v-for="(item, i) in courses" :key="i" class="course-item">
        <img class="img" :src="item.src" :width="item.width || 50" :height="item.height || 50" alt="">
        <div class="content">
          <div class="title">{{ item.title }}</div>
          <countTo class="count" :start-val="startVal" :end-val="item.count" :duration="2000" />
        </div>
      </div>
    </div>
    <div class="charts-container">
      <div class="charts">
        <div class="year">
          <h3>课程每年发布情况</h3>
          <div class="choose-type">
            <span class="bar" @click="changeType(1)"><img width="24" height="24" :src="barSrc" alt=""></span>
            <span class="line" @click="changeType(2)"><img width="24" height="24" :src="lineSrc" alt=""></span>
          </div>
        </div>
        <div ref="barLineChart" class="bar-line-chart" />
      </div>
      <div class="charts">
        <div class="year">
          <h3>课程栏目分布情况</h3>
        </div>
        <div ref="pieChart" class="pie-chart" />
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import countTo from 'vue-count-to'

export default {
  name: 'Dashboard',
  components: {
    countTo
  },
  data() {
    return {
      startVal: 0,
      courses: [
        {
          key: 'courseCount',
          src: require('../../assets/img/course.png'),
          title: '课程',
          count: 0,
          width: 70,
          height: 70
        },
        {
          key: 'commentCount',
          src: require('../../assets/img/comment.png'),
          title: '用户评价',
          count: 0
        },
        {
          key: 'columnCount',
          src: require('../../assets/img/category.png'),
          title: '课程分类',
          count: 0
        },
        {
          key: 'joinCount',
          src: require('../../assets/img/count.png'),
          title: '参课人次',
          count: 0
        }
      ],
      barLineOptions: {
        xAxis: {
          data: []
        },
        yAxis: {},
        tooltip: {},
        legend: {
          data: ['课程数量']
        },
        series: [{
          name: '课程数量',
          type: 'bar',
          data: []
        }]
      },
      pieOptions: {
        legend: {
          data: ['课程分类数量']
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '课程分类数量',
            type: 'pie',
            radius: '55%',
            data: [],
            textStyle: {
              color: 'rgba(0, 0, 0, 0.6)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(0, 0, 0, 0.3)'
              }
            }
          }
        ]
      },
      barSrc: require('../../assets/img/bar-selected.png'),
      lineSrc: require('../../assets/img/line.png')
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getHomeData()
  },
  mounted() {
    console.log(this.courseInfo)
  },
  methods: {
    initBarLineChart() {
      const barLineChart = this.$echarts.init(this.$refs.barLineChart)
      this.barLineChart = barLineChart
      barLineChart.setOption(this.barLineOptions)
      window.addEventListener('resize', () => {
        barLineChart.resize()
      })
    },
    initPieChart() {
      const pieChart = this.$echarts.init(this.$refs.pieChart)
      pieChart.setOption(this.pieOptions)
      window.addEventListener('resize', () => {
        pieChart.resize()
      })
    },
    changeType(type) {
      this.barSrc = type === 1 ? require('../../assets/img/bar-selected.png') : require('../../assets/img/bar.png')
      this.lineSrc = type === 2 ? require('../../assets/img/line-selected.png') : require('../../assets/img/line.png')
      this.barLineOptions.series[0].type = type === 1 ? 'bar' : 'line'

      this.barLineChart.setOption(this.barLineOptions)
    },
    async getHomeData() {
      const res = await this.$api.home()
      if (res && res.code === 200) {
        const data = res.data
        // 初始化上面四个指标
        this.courses.forEach(item => {
          item.count = data[item.key]
        })
        // 初始化柱状图
        Object.keys(data.yearData).forEach(key => {
          this.barLineOptions.xAxis.data.push(key)
          this.barLineOptions.series[0].data.push(data.yearData[key])
        })
        this.initBarLineChart()
        // 初始化拼图
        data.columnData.forEach(item => {
          if (item.count > 0) {
            const dict = {
              name: item.channelName,
              value: item.count
            }
            this.pieOptions.series[0].data.push(dict)
          }
        })
        this.initPieChart()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/styles/mixin.scss";

.home-container{
  padding: 40px 24px;
}
.course-list{
  display: flex;
  justify-content: space-around;
  .course-item{
    display: flex;
    align-items: center;
    background-color: #fff;
    width: 16%;
    min-width: 220px;
    height: 120px;
    font-size: 18px;
    @include borderShadow(6px);
    .img{
      margin: 0 20px;
    }
    .title{
      margin-bottom: 10px;
      font-weight: bold;
    }
  }
}
.charts-container{
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
}
.charts{
  width: 46%;
  height: 450px;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid #e7e7e7;
  box-shadow: 0 2px 10px 0 rgb(0 0 0 / 10%);
  background: #fff;
  .year{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .choose-type{
    display: flex;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #f7f4f4;
    box-shadow: 0 2px 4px 0 rgb(0 0 0 / 5%);
    padding: 2px 4px;
    .bar, .line{
      display: inline-block;
      height: 24px;
    }
    .bar{
      margin-right: 4px;
    }
  }
}
.bar-line-chart, .pie-chart{
  width: 100%;
  height: 90%;
}
</style>
